<template>
  <div style="background-color: rgb(238, 238, 238)">
    <card>
      <div style="width: 95%; margin: 0 auto" class="conner_box">
        <div style="float: left">
          <span style="margin-right: 20px">文章标题</span>
          <div style="display: inline-block">
            <el-input placeholder="请输入文章标题" v-model="title" clearable>
            </el-input>
          </div>
        </div>
        <div style="float: left; margin-left: 100px">
          <span style="margin-right: 20px"> 状态</span>
          <div style="display: inline-block">
            <el-select v-model="state" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="float: left; display: inline-block; margin-left: 68px">
          <span style="margin-right: 20px"> 发布时间</span>
          <div style="display: inline-block">
            <el-date-picker
              v-model="starttime"
              type="datetime"
              placeholder="   请选择"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              prefix-icon=""
            >
            </el-date-picker>
          </div>
          至
          <div style="display: inline-block">
            <el-date-picker
              v-model="endtime"
              type="datetime"
              placeholder="    请选择"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </div>
        <!-- <div style="float: left; margin-top: 2%; display: inline-block"></div> -->
        <div style="float: right; margin-top: 50px">
          <div style="display: inline-block; margin-right: 20px">
            <button-cn text="查询" @myclick="query"></button-cn>
          </div>
          <div style="display: inline-block">
            <button-cn text="重置" @myclick="Reset"></button-cn>
          </div>
        </div>
      </div>
    </card>
    <div class="itemList">
      <span>科学育儿列表</span>
      <div style="float: right; margin-left: 10px; margin-right: 40px">
        <button-cn text="主题添加" iconShow @myclick="pushtheme"></button-cn>
      </div>
      <div style="float: right">
        <button-cn text="新增文章" iconShow @myclick="pushchilrend"></button-cn>
      </div>
    </div>
    <div style="width: 100%; margin: 0 auto">
      <card>
        <el-table
          :data="ScientificArticlesListUser"
          align="center"
          style="width: 100%"
          height="550"
        >
          <!-- <el-table-column type="selection" width="100"> </el-table-column> -->
          <!-- <el-table-column prop="science_id" label="文章表id">
          </el-table-column> -->
          <el-table-column label="文章标题" align="center">
            <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 100%;
                "
              >
                {{ scope.row.science_title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="文章副标题" align="center">
            <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 100%;
                "
              >
                {{ scope.row.science_subtitle }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="science_imgurl" label="封面图" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.science_imgurl" alt="" style="width: 40px" />
            </template>
          </el-table-column>
          <el-table-column label="文章发布时间" align="center">
            <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 100%;
                "
              >
                {{ scope.row.science_createtime }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="science_createtime" label="文章发布时间">
          </el-table-column> -->
          <el-table-column prop="classifyname" label="分类名称" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!-- <el-button type="primary" @click="ViewDetails(scope.row)"
                >查看详情</el-button
              > -->
              <span class="edit" @click="ViewDetails(scope.row)">编辑</span>
              <span
                class="topping1"
                @click="topping(scope.row)"
                v-show="scope.row.scinence_istop == 2"
                >设置置顶</span
              >
              <span
                class="topping"
                @click="conceltopping(scope.row)"
                v-show="scope.row.scinence_istop == 1"
                >取消置顶</span
              >
            </template>
          </el-table-column>
        </el-table>
      </card>
      <div style="float: right; margin-right: 80px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!--  编辑文章-->

    <alert-cn
      title="编辑文章"
      :alertShow="editArticle"
      rightText="修改"
      leftText="取消"
      @clone="editArticle = false"
      @confirm="confirmtext"
      @cancel="cancelpushtext"
    >
      <el-form :model="ViewDetailsObject" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model.trim="ViewDetailsObject.science_title"></el-input>
        </el-form-item>
        <el-form-item label="副标题">
          <el-input
            v-model.trim="ViewDetailsObject.science_subtitle"
          ></el-input>
        </el-form-item>
        <el-form-item label="封面图">
          <img
            :src="ViewDetailsObject.science_imgurl"
            alt=""
            style="width: 200px"
          />
        </el-form-item>
        <!-- <el-form-item label="文章主题id">
          <el-input v-model="ViewDetailsObject.classifyid"></el-input>
        </el-form-item> -->
        <el-form-item label="文章发布时间">
          <el-date-picker
            v-model="ViewDetailsObject.science_createtime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="分类名称">
          <el-input v-model="ViewDetailsObject.classifyname"></el-input>
        </el-form-item>
        <el-form-item label="文章内容">
          <el-input v-model="ViewDetailsObject.science_count"></el-input>
        </el-form-item>
        <el-form-item label="文章排版图片">
          <img :src="ViewDetailsObject.science_img" alt="" />
        </el-form-item>

        <el-form-item label="公众号文章详情链接">
          <el-input v-model="ViewDetailsObject.science_urllink"></el-input>
        </el-form-item>
        <!-- <el-form-item label="公众号文章详情链接">
          <el-input v-model="ViewDetailsObject.science_urllink"></el-input>
        </el-form-item> -->
        <el-form-item label="分享图片">
          <img
            :src="ViewDetailsObject.scinence_shareimg"
            alt=""
            class="imgbox"
          />
        </el-form-item>
        <el-form-item label="分享标题">
          <el-input v-model="ViewDetailsObject.scinence_sharetitle"></el-input>
        </el-form-item>
        <el-form-item label="原创&公众号">
          <!-- <el-input v-model="ViewDetailsObject.state"></el-input> -->
          <el-select
            v-model="ViewDetailsObject.science_type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in textIsshow"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="显示状态">
          <el-select
            v-model="ViewDetailsObject.science_state"
            placeholder="请选择"
          >
            <el-option
              v-for="item in textStutas"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </alert-cn>

    <!-- 新增文章 -->
    <alert-cn
      title="新增文章"
      :alertShow="dialogVisible"
      rightText="发布"
      leftText="存为草稿"
      @clone="clone"
      @confirm="confirmpushtext"
      @cancel="cloneherver"
    >
      <el-form :model="pushtextPlus" label-width="150px">
        <el-form-item label="标题">
          <el-input v-model.trim="pushtextPlus.title"></el-input>
        </el-form-item>
        <el-form-item label="副标题">
          <el-input v-model.trim="pushtextPlus.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="来源">
          <!-- <el-input v-model.trim="pushtextPlus.source"></el-input> -->
          <el-select
            v-model="pushtextPlus.source"
            placeholder="请选择"
            @change="sourceChange"
          >
            <el-option
              v-for="item of sourceData"
              :key="item.id"
              :label="item.classify_name"
              :value="item.classify_name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图">
          <!-- <el-input v-model="pushtextPlus.subtitle"></el-input> -->
          <imgupload
            imgurl="http://management.api.asmm.vip/index.php/Science/coverimgupload"
            @imgsucc="coverimgsucc"
            ref="imgupload"
          ></imgupload>
        </el-form-item>
        <el-form-item label="文章主题">
          <!-- <el-input v-model="pushtextPlus.classifyid"></el-input> -->
          <el-select
            v-model="pushtextPlus.classifyid"
            placeholder="请选择"
            @change="classifyidChange"
          >
            <el-option
              v-for="item in childrenData"
              :key="item.classify_id"
              :label="item.classify_name"
              :value="item.classify_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示状态">
          <!-- <el-input v-model="pushtextPlus.state"></el-input> -->
          <el-select
            v-model="pushtextPlus.state"
            placeholder="请选择"
            @change="showStatusChange"
          >
            <el-option
              v-for="item in showStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章类型">
          <el-radio
            v-model="pushtextPlus.article"
            label="1"
            @change="radioChange"
            >公众号</el-radio
          >
          <el-radio
            v-model="pushtextPlus.article"
            label="2"
            @change="radioChange"
            >原创</el-radio
          >
        </el-form-item>
        <el-form-item
          label="公众号文章详情链接"
          v-show="pushtextPlus.article == '1'"
        >
          <el-input v-model="pushtextPlus.urllink"></el-input>
        </el-form-item>
        <el-form-item
          label="分享时使用的图片"
          v-show="pushtextPlus.article == '2'"
        >
          <imgupload
            imgurl="http://management.api.asmm.vip/index.php/Science/sharecover"
            @imgsucc="sharecoverimgsucc"
            ref="imguploada"
          ></imgupload>
        </el-form-item>
        <el-form-item
          label="分享时使用的标题"
          v-show="pushtextPlus.article == '2'"
        >
          <el-input v-model="pushtextPlus.sharetitle"></el-input>
        </el-form-item>
        <el-form-item label="文字内容" v-show="pushtextPlus.article == '2'">
          <quillEditor @textChange="quillEditorChange"></quillEditor>
        </el-form-item>
        <el-form-item label="文字排版图片" v-show="pushtextPlus.article == '2'">
          <!-- <el-input v-model="pushtextPlus.contentimg"></el-input> -->
          <imgupload
            imgurl="http://management.api.asmm.vip/index.php/Science/contentimgupload"
            @imgsucc="contentimgsucc"
            ref="imguploadb"
          ></imgupload>
        </el-form-item>
        <el-form-item label="来源" v-show="pushtextPlus.article == '2'">
          <el-input v-model="pushtextPlus.source"></el-input>
        </el-form-item>
      </el-form>
    </alert-cn>
    <AlertCn
      :alertShow="themeISshow"
      title="新增主题"
      rightText="发布"
      leftText="取消"
      @clone="
        themeISshow = false;
        science_title = '';
      "
      @cancel="
        themeISshow = false;
        science_title = '';
      "
      @confirm="submint"
    >
      <el-form :model="ViewDetailsObject" label-width="80px">
        <el-form-item label="主题名称">
          <el-input v-model="science_title"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="radio" label="1" @change="redeis">显示</el-radio>
          <el-radio v-model="radio" label="2" @change="redeis">隐藏</el-radio>
        </el-form-item>
      </el-form>
    </AlertCn>
    <AlertCn :alertShow="false" title="标题" rightText="发布" leftText="取消">
      <quillEditor :text="text"></quillEditor>
      <imgupload></imgupload>
      <el-radio v-model="radio" label="2">备选项</el-radio>
      <el-radio v-model="radio" label="1">备选项</el-radio>
    </AlertCn>
  </div>
</template>

<script>
import {
  childrenList,
  ScientificArticles,
  ChildrenisTheme,
  ViewDetails,
  StickyPosts, // 置顶
  Childupdates,
  addscience, // 新增文章
} from "@/request/index";
import quillEditor from "@/components/from/quillEditor.vue";
import card from "../../components/from/card.vue";
import ButtonCn from "../../components/from/button-cn.vue";
import AlertCn from "@/components/from/alert-cn.vue";
import imgupload from "@/components/from/imgupload.vue";
export default {
  components: { card, ButtonCn, AlertCn, imgupload, quillEditor },
  data() {
    return {
      editArticle: false,
      options: [
        {
          value: 1,
          label: "显示",
        },
        {
          value: 2,
          label: "下线",
        },
      ],
      radio: "1",
      bannerTitle: "",
      text: "",
      pushObject: {
        topicname: "",
      },
      input: "",

      ViewDetailsObject: {},
      ViewDetailsIsShow: false,
      dialogVisible: false,
      childrenData: [],
      count: 10,
      page: 1,
      classifyid: null,
      title: "",
      state: null,
      ScientificArticlesListUser: [],
      radio: "1",
      total: 0,
      themeISshow: false,
      radio: "1",
      science_title: "",
      starttime: "",
      endtime: "",
      textIsshow: [
        {
          value: 1,
          label: "公众号",
        },
        {
          value: 2,
          label: "原创",
        },
      ],
      textStutas: [
        {
          value: 1,
          label: "显示 ",
        },
        {
          value: 2,
          label: "隐藏 ",
        },
        {
          value: 3,
          label: "草稿 ",
        },
      ],
      showStatus: [
        {
          value: 1,
          label: "显示 ",
        },
        {
          value: 2,
          label: "隐藏 ",
        },
        {
          value: 3,
          label: "草稿 ",
        },
      ],
      pushtextPlus: {
        title: "",
        subtitle: "",
        Coverimage: "", // 封面图
        classifyid: null,
        article: '1',
        shareimg: "", // 分享时使用的图片
        sharetitle: "", // 分享时使用的标题
        state: 1,
        urllink: "",
        count: "",
        contentimg: "", // 文字排版图片
        source: "", // 来源
      },
      sourceData:[
        {
          id:1,
          classify_name:'爱氏妈妈上韵会员中心'
        },
        {
          id:2,
          classify_name:'小爱妈妈育儿分享'
        },

      ]
    };
  },

  onload(path) {
    console.log(path);
  },
  created() {
    this.bannerTitle = this.$route.query.name;
    this.ChildrenMethods(), this.ScientificArticlesList();
  },
  methods: {
 
    sourceChange(text) {
      this.pushtextPlus.source = text
      // console.log(text);  
  },
    cancel() {
      this.dialogVisible = false;
      for (var item in this.pushtextPlus) {
        if (item == "article") return this.pushtextPlus[item] == "1";
        this.pushtextPlus[item] == "";
      }
    },
    cloneherver() {
   
      this.pushtextPlus.state = 3;
      this.confirmpushtext();
    },
    clone() {
      this.dialogVisible = false;
      for (var item in this.pushtextPlus) {
      console.log(item);
        if (item == "article") return this.pushtextPlus.article = "1";
        this.pushtextPlus[item] = "";
            
      }
    },
    classifyidChange(status) {
      this.pushtextPlus.classifyid = status;
    },
    quillEditorChange(text) {
   
      // console.log(text);
      this.pushtextPlus.count = text.replace(/<[^>]+>/ig, '')
      // console.log(text.replace(/<[^>]+>/ig, ''));
    },
    contentimgsucc(img) {
      this.pushtextPlus.contentimg = img;
    },
    showStatusChange(status) {
      this.pushtextPlus.state = status;
    },
    coverimgsucc(img) {
      this.pushtextPlus.Coverimage = img[0];
      console.log(img[0]);
    },
    sharecoverimgsucc(img) {
      this.pushtextPlus.shareimg;
    },
    radioChange(radio) {
      // this.pushtextPlus.article = radio;
      console.log(radio);
    },
    confirmtext() {
      // return console.log(22222);
      if (
        this.ViewDetailsObject.science_title == "" ||
        this.ViewDetailsObject.science_subtitle == ""
      )
        return this.$message.error("标题不能为空哦");
      const {
        science_title,
        science_subtitle,
        science_imgurl,
        science_id,
        classifyname,
        science_count,
        science_img,
        science_urllink,
        scinence_shareimg,
        scinence_sharetitle,
        science_type,
        science_state,
        science_classifyid,
      } = this.ViewDetailsObject;
      // return console.log(Object.values(this.ViewDetailsObject));
      Childupdates(
        science_title,
        science_subtitle,
        science_imgurl,
        science_id,
        classifyname,
        science_count,
        science_img,
        science_urllink,
        scinence_shareimg,
        scinence_sharetitle,
        science_type,
        science_state,
        science_classifyid
      ).then((res) => {
        // console.log(res);
        if (res.code != "0000") return this.$message.error(res.msg);
        this.ScientificArticlesList();
        this.$message.success("编辑成功");
        // this.clone()
      });
    },
    cancelpushtext() {
      this.editArticle = false;
    },
    confirmpushtext() {
   
  
      if (this.pushtextPlus.title == "" || this.pushtextPlus.subtitle == "")
        return this.$message.error("标题不能为空哦");
       
      addscience(
        this.pushtextPlus.title,
        this.pushtextPlus.subtitle,
        this.pushtextPlus.Coverimage, // 封面图
        this.pushtextPlus.classifyid,
        this.pushtextPlus.article,
        this.pushtextPlus.shareimg, // 分享时使用的图片
        this.pushtextPlus.sharetitle, // 分享时使用的标题
        this.pushtextPlus.state,
        this.pushtextPlus.urllink,
        this.pushtextPlus.count,
        this.pushtextPlus.contentimg, // 文字排版图片
        this.pushtextPlus.source // 来源
      ).then((res) => {
        // console.log(res);
        if (res.code != "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.clone();
        this.$refs.imgupload.imgdata = [];
        this.$refs.imguploada.imgdata = [];
        this.$refs.imguploadb.imgdata = [];
        this.$refs.imgupload.status = false;
        this.ScientificArticlesList();
      });
    },

    Reset() {
      this.classifyid = null;
      this.title = "";
      this.state = null;
      this.starttime = "";
      this.endtime = "";
    },
    submint() {
      ChildrenisTheme(this.science_title, parseInt(this.radio)).then((res) => {
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.themeISshow = false;
        this.ScientificArticlesList();
      });
    },
    redeis(red) {
      this.radio = red;
    },
    pushtheme() {
      this.themeISshow = true;
    },
    query() {
      this.count = 10;
      this.page = 1;
      this.ScientificArticlesList();
      this.$message.success("查询成功");
    },
    clonepushtext() {
      this.dialogVisible = false;
    },
    //取消置顶
    conceltopping(item) {
      StickyPosts(item.science_id, 2).then((res) => {
        console.log(res);
        this.ScientificArticlesList();
      });
    },
    // 设置置顶
    topping(item) {
      StickyPosts(item.science_id, 1).then((res) => {
        console.log(res);
        this.ScientificArticlesList();
      });
    },
    ViewDetails(item) {
      // console.log(item);
      ViewDetails(item.science_id).then((res) => {
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.ViewDetailsObject = res.data[0];
        console.log(this.ViewDetailsObject);
        this.editArticle = true;
      });
    },
    pushchilrend() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 科学育儿话题列表
    ChildrenMethods() {
      childrenList()
        .then((res) => {
          if (res.code !== "0000") return this.$message.error(res.msg);
          this.childrenData = res.data;
          console.log();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 科学育儿文章列表
    ScientificArticlesList() {
      ScientificArticles(
        this.classifyid,
        this.title,
        this.state,
        this.starttime,
        this.endtime,
        this.count,
        this.page
      ).then((res) => {
        console.log(res);
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.ScientificArticlesListUser = res.data.data;
        this.total = res.data.total;
      });
    },
    handleSizeChange(index) {
      // console.log('改变数据',index);
      this.count = index;
      this.ScientificArticlesList();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.ScientificArticlesList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../components/style/init_el_checkout.scss";
.conner_box ::v-deep .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 170px;
}
.conner_box ::v-deep .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 32px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.itemList {
  width: 95%;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
  box-sizing: border-box;
  // margin-right: 30px;
  box-sizing: border-box;
}

.edit {
  // color: #e04e2f;
  margin-right: 10px;
  cursor: pointer;
}

.topping1 {
  cursor: pointer;
}

.topping {
  cursor: pointer;
  //  color: #eee;
  color: #e04e2f;
}
.imgbox {
  width: 100px;
}
</style>
